<template>
  <div>
    <div class="phone_bc">
      <h1 class="title_phone">速报视图自动发布后台管理系统</h1>
      <div class="all_phone">
        <div class="box_phone">
          <div class="box_in_phone">
            <label>经度:</label>
            <Input v-model="longitude" size="large" placeholder="请输入经度" class="long_input" />
          </div>
        </div>
        <div class="box_phone">
          <div class="box_in_phone">
            <label>纬度:</label>
            <Input v-model="latitude" size="large" placeholder="请输入纬度" class="lat_input" />
          </div>
        </div>
        <div class="box_phone">
          <div class="box_in_phone">
            <label>震级:</label>
            <Input v-model="magnitude" size="large" placeholder="请输入震级" class="mag_input" />
          </div>
        </div>
        <div class="box_phone">
          <div class="box_in_phone">
            <label>深度:</label>
            <Input v-model="depth" size="large" placeholder="请输入深度/km" class="dep_input" />
          </div>
        </div>
        <div class="box_phone">
          <div class="box_in_phone">
            <label>时间:</label>
            <DatePicker v-model="time" type="datetime" size="large" placeholder="自定义日期格式"></DatePicker>
          </div>
        </div>

        <div class="btn_phone box_phone">
          <Button type="primary" @click="getCityName()">确认提交</Button>
        </div>
      </div>
      <div id="seismicinfoGmap_phone"></div>
    </div>
  </div>
</template>

<script>
import circlePng from "@/assets/mapimg/circle.png";
import ajax from "axios";
import qs from "qs";
import pub from "@/assets/pubFile.json";

export default {
  name: "indexphone",
  data() {
    return {
      longitude: null,
      latitude: null,
      depth: null,
      magnitude: null,
      time: null,
      map: null,
      street: null,
      district: null,
      city: null,
      province: null,
      intensity: null,
      point: null,
      learnmarker: null,
      circlePng: circlePng
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new google.maps.Map(
        document.getElementById("seismicinfoGmap_phone"),
        {
          zoom: 10,
          streetViewControl: false,
          center: { lat: 39.915, lng: 116.404 }
        }
      );
    },
    // 将经纬度从谷歌地图偏移到百度地图
    googleToBd(gcjLat, gcjLon) {
      let PI = 3.14159265358979324;
      let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
      let x = gcjLon,
        y = gcjLat;
      let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
      let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
      let bdLon = z * Math.cos(theta) + 0.0065;
      let bdLat = z * Math.sin(theta) + 0.006;
      return { lat: bdLat, lon: bdLon };
    },
    //根据坐标获取地区名称
    getCityName() {
      // this.longitude = parseFloat(parseFloat(this.longitude).toFixed(4)); //经度
      // this.latitude = parseFloat(parseFloat(this.latitude).toFixed(4)); //纬度
      let x = parseFloat(parseFloat(this.longitude).toFixed(4));
      let y = parseFloat(parseFloat(this.latitude).toFixed(4));
      let coordinate = this.googleToBd(y, x);
      let lon = parseFloat(parseFloat(coordinate.lon).toFixed(4));
      let lat = parseFloat(parseFloat(coordinate.lat).toFixed(4));

      this.depth = parseFloat(this.depth); //深度
      this.magnitude = parseFloat(this.magnitude); //震级
      // this.time  //时间
      this.intensity = parseInt(this.magnitude) + 2;
      if (
        // !this.longitude ||
        // !this.latitude ||
        !lon ||
        !lat ||
        !this.depth ||
        !this.magnitude ||
        !this.time ||
        !this.intensity
      ) {
        this.$Message.warning("请完善数据");
      } else {
        this.getCity(lat, lon);
      }
    },
    //获得县名称
    getCity(lat, lon) {
      this.point = new google.maps.LatLng({
        // lat: this.latitude,
        // lng: this.longitude
        lat: lat,
        lng: lon
      });
      let geocoder = new google.maps.Geocoder(); //定位到经纬度的地方
      this.map.setCenter(this.point);
      this.map.setZoom(10);
      let marker = new google.maps.Marker({
        position: this.point,
        map: this.map,
        icon: this.circlePng
      });
      let that = this;
      geocoder.geocode({ location: that.point }, function(results, status) {
        //此处this指向会发生改变，所以用上面提前指向的that
        //因为函数嵌套，所以this指向了window，that才是指向当前对象
        if (status === "OK") {
          if (results[1]) {
            that.map.setCenter(that.point);
            results[0].address_components[0] != undefined
              ? (that.street = results[0].address_components[0].long_name)
              : (that.street = null);
            results[0].address_components[1] != undefined
              ? (that.district = results[0].address_components[1].long_name)
              : (that.district = null);
            results[0].address_components[2] != undefined
              ? (that.city = results[0].address_components[2].long_name)
              : (that.city = null);
            results[0].address_components[3] != undefined
              ? (that.province = results[0].address_components[3].long_name)
              : (that.province = null);

            ajax({
              method: "post",
              url:
                "http://" + pub.ip + "/subaoApi/public/api/release/releaseEq",
              data: qs.stringify({
                longitude: that.longitude,
                latitude: that.latitude,
                depth: that.depth,
                magnitude: that.magnitude,
                time: that.time.format("yyyy-MM-dd hh:mm:ss"),
                city: that.city,
                province: that.province,
                district: that.district,
                intensity: that.intensity,
                street: that.street
              }),
              //允许携带cookie
              withCredentials: true
            })
              .then(res => {
                that.$Message.success("提交成功");
                if (res.data.status === 1) {
                  let data = parseInt(res.data.data);
                  if (data) {
                    that.$Message.success("发布成功");
                  } else {
                    that.$Message.error("找不到城市");
                  }
                } else {
                  that.$Message.error("无数据");
                }
              })
              .catch(err => {
                that.$Message.error("网络错误");
                console.error(err);
          
              });
          } else {
            that.$Message.error("非中国地域");
            that.map.setCenter(that.point);
          }
        } else {
          that.$Message.error("请求失败");
          that.map.setCenter(that.point);
        }
      });
    },
    //跳转页面
    goPhone() {
      ajax({
        method: "get",
        url: "http://" + pub.ip + "/subaoApi/public/api/push/phonePush",
        //允许携带cookie
        withCredentials: true
      })
        .then(res => {
          this.$Message.success("跳转成功");
          window.location.href = res.data.data;
        })
        .catch(err => {
          this.$Message.error("跳转失败");
          console.error(err);
        });
    }
  }
};
</script>

<style>
.phone_bc {
  width: 100%;
  height: 100%;
  background-color: #4240401c;
}
.all_phone {
  position: relative;
  top: 15%;
}
.title_phone {
  position: relative;
  top: 10%;
  text-align: center;
  color: rgba(12, 1, 1, 0.9);
  font-size: 25px;
  font-weight: 200;
  font-weight: 600;
}
.box_phone {
  position: relative;
  width: 85%;
  margin: 10px auto 5px auto;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box_in_phone {
  width: 330px;
  position: absolute;
  margin: auto;
  letter-spacing: 12px;
  font-weight: 600;
}
.box_in_phone label {
  margin: 1%;
  width: 30px;
  position: relative;
  top: 2px;
  left: 0px;
  font-size: 17px;
}
.box_in_phone input {
  height: 38px;
  width: 240px;
  display: inline;
  outline: 0;
  border: 1px solid #38f;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
#seismicinfoGmap_phone {
  width: 100%;
  height: 100%;
  display: none;
}
.btn_phone {
  top: 30px;
  left: 5px;
}
.btn_phone button {
  width: 100%;
  border: 0px;
  background-color: #63c1e2;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  outline: 0px;
  color: #fff;
}
.ivu-input-wrapper {
  width: 75% !important;
}
</style>
